<template>
  <div class="index-container ec-container">
    <el-row :gutter="10" class="form">
      <el-col :span="4">
        <div class="grid-content">
          <span>渠道：</span>
          <el-select class="w50" v-model="value" placeholder="请选择">
            <el-option
              v-for="item in channelOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content">
          <span>平台：</span>
          <el-select class="w50" v-model="value" placeholder="请选择">
            <el-option
              v-for="item in platformOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content p10">
          <span>店铺编码：</span>
          <el-input class="w40" v-model ="storeId" label-width="50"></el-input>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content p10">
          <span>店铺名称：</span>
          <el-input class="w40" v-model ="storeName" label-width="50"></el-input>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content">
          <span>日期：</span>
          <el-date-picker
            class="w50"
            v-model="stsDate"
            type="date"
            placeholder="选择日期">
          </el-date-picker>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content">
          <span>时间：</span>
          <el-select class="w50" v-model="value" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="10" class="info">
      <el-col :span="4">
        <div class="grid-content">
          <p class="title">销售额</p>
          <p>{{sellAmount}}</p>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content">
          <p class="title">会员数</p>
          <p>{{memberNum}}</p>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content">
          <p class="title">商品数量</p>
          <p>{{productNum}}</p>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content">
          <p class="title">客单价</p>
          <p>{{perCustomerPrice}}</p>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content">
          <p class="title">折扣率</p>
          <p>{{discountRate}}%</p>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content">
          <p class="title">笔件数</p>
          <p>{{amount}}</p>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="12">
        <div id="trend" class="grid-content"></div>
      </el-col>
      <el-col :span="12">
        <div id="buyKpi" class="grid-content"></div>
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="10">
        <div class="grid-content des">
          <p>* 新会员；第一次购买日期在统计周期内的会员，则为新会员；</p>
          <p>* 老会员；在统计周期之前，已经都购买记录的会员，则为老会员；</p>
        </div>
        <div id="number" class="grid-content mt10 number"></div>
      </el-col>
      <el-col :span="14">
        <div id="saleKpi" class="grid-content"></div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  name: "memberSell",
  components: {},

  data() {
    return {

      //1：按日；2：按月；3：季度；4：年
      options: [
        {
          value: 1,
          label: "按日"
        },
        {
          value: 2,
          label: "按月"
        },
        {
          value: 3,
          label: "按季度"
        },
        {
          value: 4,
          label: "按年"
        },
      ],

      //渠道下拉选项
      channelOptions: [
        {
          value:null,
          label:null,
        }
      ],

      //平台下拉选项
      platformOptions: [
        {
          value:null,
          label:null,
        }
      ],


      value: "",
      stsDate: null,//统计日期
      storeId:null,
      storeName:null,

      //销售额
      sellAmount:0,
      //会员数
      memberNum:0,
      //商品数量
      productNum:0,
      //客单价
      perCustomerPrice:0,
      //折扣率
      discountRate:0,
      //笔件数
      amount:0,

      //销售趋势：
      consumeAmountList:[],//销售趋势时间列表；
      consumeDateList:[],//会员数列表；
      memberNumberList:[],//销售额列表；


      //销售趋势KPI：
      memberAvgAmountList:[],//销售趋势时间列表；
      consumeDateList2:[],//会员数列表；
      orderAvgGoodsQuantityList:[],//销售额列表；

      //新来会员统计
      newMemberNumber:0,
      oldMemberNumber:0,

      //销售趋势KPI：
      newMemberAmountList:[],//销售趋势时间列表；
      consumeDateList3:[],//会员数列表；
      oldMemberAmountList:[],//销售额列表；



    };
  },

  created(){
//    this.getStsDate();
  },

  mounted() {
    this.getValueOfSell();//获取页面基本数据：销售额，会员数，商品数量，客单价，折扣率，笔件数；
    this.getTrendOfMemberSell();//会员销售趋势；
    this.getTrendOfMemberSellKPI();//会员销售KPI趋势；
    this.getCountOfNewAndOldMember();
    this.getCountOfNewAndOldMemberSellKPI();
  },
  methods: {


    /**
     * 获取统计日期
     */
    getStsDate(){
      let this_ = this;
      let nowDate = new Date();
      let year = nowDate.getFullYear();
      let month = nowDate.getMonth() + 1 < 10 ? "0" + (nowDate.getMonth() + 1)
        : nowDate.getMonth() + 1;
      let day = (nowDate.getDate() - 1) < 10 ? "0" + (nowDate.getDate()-1) : (nowDate.getDate() - 1);
      this_.stsDate = year + "-" + month + "-" + day;
    },

    /**
     * 销售额，会员数，商品数量，客单价，折扣率，笔件数，表单
     */
    getValueOfSell(){
      let this_ = this;
      let param = {
        channelId:this_.channelId,
        storeId:this_.storeId,
        storeName:this_.storeName,
        platformId:this_.platformId,
        status:1,
        deleteFlag:0,
        deptId:null,
        merchantId:null,
        id:null,
        stsDate: this_.stsDate,
      };
      this_.utils.request.getValueOfSell(param,res => {
        if (res !==null && res.code === '0000' && res.data !== null){
          this_.sellAmount = res.data.consumeReceivedAmount;//销售额
          this_.memberNum = res.data.consumeMemberNumber;//会员数
          this_.productNum = res.data.orderGoodsQuantity;//商品数量
          this_.perCustomerPrice = res.data.memberReceivableAvgAmount;//客单价
          this_.discountRate = res.data.discountRate;//折扣率
          this_.amount = res.data.orderAvgGoodsQuantity;//笔件数
        }else{
          this_.$message({message:'无法获取会员销售记录数' , type: 'error'})
        }
      });
    },

    /**
     * 销售趋势统计 - 柱状图
     */
    getTrendOfMemberSell(){
      let this_ = this;
      let param = {
        channelId:this_.channelId,
        storeId:this_.storeId,
        storeName:this_.storeName,
        platformId:this_.platformId,
        status:1,
        deleteFlag:0,
        deptId:null,
        merchantId:null,
        id:null,
        stsDate: this_.stsDate,
      };
      this_.utils.request.getTrendOfMemberSell(param,res => {
        if (res !==null && res.code === '0000' && res.data !== null){
          this_.consumeAmountList = res.data.consumeAmountList;//销售数列表
          this_.consumeDateList = res.data.consumeDateList;//销售日期列表
          this_.memberNumberList = res.data.memberNumberList;//会员数量列表
          this_.trend();
        }else{
          this_.$message({message:'无法获取会员销售趋势柱状图数据记录数' , type: 'error'})
        }
      });
    },

    /**
     * 销售趋势KPI统计 - 柱状图
     */
    getTrendOfMemberSellKPI(){
      let this_ = this;
      let param = {
        channelId:this_.channelId,
        storeId:this_.storeId,
        storeName:this_.storeName,
        platformId:this_.platformId,
        status:1,
        deleteFlag:0,
        deptId:null,
        merchantId:null,
        id:null,
        stsDate: this_.stsDate,
      };
      this_.utils.request.getTrendOfMemberSellKPI(param,res => {
        if (res !==null && res.code === '0000' && res.data !== null){
          this_.consumeAmountList = res.data.consumeAmountList;//销售数列表
          this_.consumeDateList2 = res.data.consumeDateList;//销售日期列表
          this_.orderAvgGoodsQuantityList = res.data.orderAvgGoodsQuantityList;//会员数量列表
          this_.buyKpi();
        }else{
          this_.$message({message:'无法获取会员销售趋势柱状图数据记录数' , type: 'error'})
        }
      });
    },
    /**
     * 新老会员占比 - 饼状图
     */
    getCountOfNewAndOldMember(){
      let this_ = this;
      let param = {
        channelId:this_.channelId,
        storeId:this_.storeId,
        storeName:this_.storeName,
        platformId:this_.platformId,
        status:1,
        deleteFlag:0,
        deptId:null,
        merchantId:null,
        id:null,
        stsDate: this_.stsDate,
      };
      this_.utils.request.getCountOfNewAndOldMember(param,res => {
        if (res !==null && res.code === '0000' && res.data !== null){
          this_.newMemberNumber = res.data.newMemberNumber;//新会员数目
          this_.oldMemberNumber = res.data.oldMemberNumber;//老会员数目
          this_.number();
        }else{
          this_.$message({message:'无法获取会员销售趋势柱状图数据记录数' , type: 'error'})
        }
      });
    },
    /**
     * 新老会员占比 - 饼状图
     */
    getCountOfNewAndOldMemberSellKPI(){
      let this_ = this;
      let param = {
        channelId:this_.channelId,
        storeId:this_.storeId,
        storeName:this_.storeName,
        platformId:this_.platformId,
        status:1,
        deleteFlag:0,
        deptId:null,
        merchantId:null,
        id:null,
        stsDate: this_.stsDate,
      };
      this_.utils.request.getCountOfNewAndOldMemberSellKPI(param,res => {
        if (res !==null && res.code === '0000' && res.data !== null){
          this_.newMemberAmountList = res.data.newMemberAmountList;//新会员数目
          this_.consumeDateList3 = res.data.consumeDateList;//老会员数目
          this_.oldMemberAmountList = res.data.oldMemberAmountList;//老会员数目
          this_.saleKpi();
        }else{
          this_.$message({message:'无法获取会员销售趋势柱状图数据记录数' , type: 'error'})
        }
      });
    },

    /**
     * 会员销售趋势 -柱状图
     */
    trend() {
      let trend = document.getElementById("trend");
      let myTrend = this.$echarts.init(trend);
      let option = {
        title: {
          text: "会员销售趋势"
        },
        xAxis: {
          type: "category",
          data: this.consumeDateList,
        },
        yAxis: [
          {
            type: "value",
            name: "销售额（线）",
            min: 0,
            max: 10,
            position: "right",
            axisLabel: {
              formatter: "{value} 百万"
            }
          },
          {
            type: "value",
            name: "会员数（柱）",
            min: 0,
            max: 5,
            position: "left",
            axisLabel: {
              formatter: "{value} 万"
            }
          }
        ],
        legend: {
          data: ["会员数", "销售额"]
        },
        series: [
          {
            barWidth: 15,
            name: "会员数",
            data: this.memberNumberList,
            type: "bar",
            smooth: true,
            color: "#1ea084"
          },
          {
            barWidth: 15,
            name: "销售额",
            data: this.consumeAmountList,
            type: "line",
            smooth: true,
            color: "#b0d1b5"
          }
        ]
      };
      myTrend.setOption(option);
    },
    // 会员购买KPI变化
    buyKpi() {
      let buyKpi = document.getElementById("buyKpi");
      let mybuyKpi = this.$echarts.init(buyKpi);
      let option = {
        title: {
          text: "会员购买KPI变化"
        },
        xAxis: {
          type: "category",
          data: this.consumeDateList2,
          axisLabel: {
            interval: 0,
            rotate: 45 //代表逆时针旋转45度
          }
        },
        yAxis: [
          {
            type: "value",
            name: "",
            min: 0,
            max: 300,
            position: "left"
          }
        ],
        legend: {
          data: ["客单价", "笔件数"]
        },
        series: [
          {
            name: "客单价",
            data: this.memberAvgAmountList,
            type: "line",
            smooth: true,
            color: "#1ea084"
          },
          {
            name: "笔件数",
            data: this.orderAvgGoodsQuantityList,
            type: "line",
            smooth: true,
            color: "#b0d1b5"
          }
        ]
      };
      mybuyKpi.setOption(option);
    },
    //  新老会员人数占比
    number() {
      let number = document.getElementById("number");
      let numberWrap = this.$echarts.init(number);
      let option = {
        title: {
          text: "新老会员人数占比"
        },
        color: ["#1ea084", "#b0d1b5"],
        tooltip: {
          show: true,
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        legend: {
          orient: "horizontal",
          left: "center",
          data: ["新会员", "老会员"]
        },
        series: [
          {
            name: "",
            type: "pie",
            radius: ["50%", "65%"],
            data: [
              { value: this.newMemberNumber, name: "新会员" },
              { value: this.oldMemberNumber, name: "老会员" }
            ]
          }
        ]
      };
      numberWrap.setOption(option);
    },
    // 新老会员销售KPI
    saleKpi() {
      let saleKpi = document.getElementById("saleKpi");
      let saleKpiWrap = this.$echarts.init(saleKpi);
      let option = {
        title: {
          text: "新老会员销售KPI"
        },
        legend: {
          data: ["新会员", "老会员"],
          left: "center"
        },
        xAxis: {
          type: "category",
          data: this.consumeDateList3
        },
        yAxis: [
          {
            type: "value",
            name: " ",
            min: 0,
            max: 5,
            position: "left",
            axisLabel: {
              formatter: "{value} 百万"
            }
          }
        ],
        series: [
          {
            name: "新会员",
            type: "bar",
            data: this.newMemberAmountList,
            barWidth: 10,
            color: "#1ea084"
          },
          {
            name: "老会员",
            type: "bar",
            data: this.oldMemberAmountList,
            barWidth: 10,
            color: "#b0d1b5"
          }
        ]
      };
      saleKpiWrap.setOption(option);
    },


    /**
     * 查询所有渠道接口，用作下拉框
     */
    listAllChannel(){
      let this_ = this;
      let param = {
        channelId:this_.channelId,
        storeId:this_.storeId,
        storeName:this_.storeName,
        platformId:this_.platformId,
        status:1,
        deleteFlag:0,
        deptId:null,
        merchantId:null,
        id:null,
        stsDate: this_.stsDate,
        createTimeStart:null,
      };
      this.utils.request.listAllChannel(param,res => {
        if (res !==null && res.code === '0000' && res.data !== null && res.data.length>0 ){
          this.channelOptions = res.data;
        }else{
          this.$message({message:'没有获取到渠道信息' , type: 'error'})
        }
      });
    },
    /**
     * 查询所有渠道接口，用作下拉框
     */
    listAllPlatform(){
      let this_ = this;
      let param = {
        channelId:this_.channelId,
        storeId:this_.storeId,
        storeName:this_.storeName,
        platformId:this_.platformId,
        status:1,
        deleteFlag:0,
        deptId:null,
        merchantId:null,
        id:null,
        stsDate: this_.stsDate,
        createTime:null,
      };
      this.utils.request.listAllPlatform(param,res => {
        if (res !==null && res.code === '0000' && res.data !== null  && res.data.length>0 ){
          this.platformOptions = res.data;
        }else{
          this.$message({message:'没有获取到平台信息' , type: 'error'})
        }
      });
    },





  }
};
</script>
<style lang="scss" scoped>
 @import "../../../../assets/css/dataCenterEcharts.css";
.ec-container {
  .info {
    .grid-content {
      height: 146px;
      text-align: center;
      font-weight: bold;
      font-size: 18px;
      color: #333;
      .title {
        display: block;
      }
    }
  }
  .des {
    background: #fff;
    height: 90px;
  }
  .number {
    height: 360px;
  }
  .form /deep/ .el-col .grid-content .el-select {
    width: 150px;
  }
  .form {
    .el-date-editor {
      width: 120px;
    }
  }
}
</style>

